<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>Progress & Activity Indicators</title>
    <meta name="description" content="Providing user with visual feedback that a process is active">

    <link rel="stylesheet" href="../../style/headers.css">
    <link rel="stylesheet" href="../../style/confirm.css">
    <link rel="stylesheet" href="../progress_activity.css">

    <!--
      This <style> and <link> is only used for the example code, is no needed for the real case use
    -->
    <style>
      html, body {
        margin: 0;
        padding: 0;
        font-size: 10px;
        background-color: #fff;
      }

      body { background: none; }

      h2.bb-docs {
        font-size: 1.8rem;
        font-family: sans-serif;
        font-weight: lighter;
        color: #666;
        margin: 10px 0;
        background-color: #f5f5f5;
        padding: 0.4rem 0.4rem 0.4rem 3rem;
        border: solid 1px #e8e8e8;
      }

      form[role="dialog"][data-type="confirm"] {
        position: relative;
        height: 30rem;
      }

      form[role="dialog"][data-type="confirm"] > section {
        overflow: hidden;
      }

      div.browser {
        background: url() no-repeat left top; 
        height: 5.2rem; 
        background-size: 32rem;
      }
      div.browser + progress {
        width: 32rem;
        margin-bottom: 1rem;
      }
    </style>
</head>

<body role="application">

  <section role="region">
    <h2 class="bb-docs">Spinner</h2>
    <progress></progress>

    <h2 class="bb-docs">Activity bar</h2>
    <progress class="pack-activity" value="0" max="100"></progress>

    <h2 class="bb-docs">Progress bar</h2>
    <progress value="80" max="100"></progress>

    <h2 class="bb-docs">Progress + activity bar</h2>
    <progress class="pack-activity" value="80" max="100"></progress>
  </section>

  <h2 class="bb-docs">Progress bar + Confirm BB</h2>
  <form role="dialog" data-type="confirm">
    <section>
      <h1>Name of the action</h1>
      <p style="text-align: center">
        <progress></progress>
      </p>      
    </section>
    <menu>
      <button class="full">Cancel</button>
    </menu>
  </form>

  <br/>

  <form role="dialog" data-type="confirm">
    <section>
      <h1>Name of the action</h1>
      <p role="status">
        <span>80%</span>
        <progress value="80" max="100"></progress>
      </p>      
    </section>
    <menu>
      <button class="full">Cancel</button>
    </menu>
  </form>
    

  <h2 class="bb-docs">Progress bar in Headers</h2>
  <section role="region">
    <header>
      <a href="#"><span class="icon icon-back">back</span></a>
      <h1>Song title</h1>
    </header>
    <progress value="80" max="100"></progress>
    <header>
      <h2>Subheader text</h2>
    </header>
  </section>

    <section role="region">
    <header>
      <a href="#"><span class="icon icon-back">back</span></a>
      <h1>Song title</h1>
    </header>
    <progress value="80" max="100" class="pack-activity"></progress>
    <header>
      <h2>Subheader text</h2>
    </header>
  </section>

  <h2 class="bb-docs">Activity bar in Headers</h2>
    <div class="browser"></div>
    <progress class="pack-activity light" value="0" max="100"></progress>
</body>
</html>
